<template>
	<u-popup :show="show" mode="bottom" round="10" @close="$emit('change',false)">
		<view class="pwd_pop_con pa-16">
			<view class="flex flex-js-sb flex-ai-center">
				<w-icon name="close4" color="#222" size="28" @click="$emit('change',false)"></w-icon>
				<view class="set" @click="$u.route('/pages/my/actionPwd/getCode')">{{handleLang('设置操作密码')}}</view>
			</view>
			<view class="title">{{handleLang('请输入操作密码')}}</view>

			<view class="price" v-if="type=='price'">{{ price }}</view>
			<view class="flex-center font-size-24 mt-12 font-w-500 font-color-black" v-if="type=='exchange'">
				<w-icon :name="sj.icon" size="19"></w-icon>
				<text class="font-size-20 ml-4">{{ sj.num }}</text>
			</view>

			<view class="line" :style="{backgroundImage:`url(${$ossUrl}/icon/line2.png)`}"></view>

			<view class="flex-center-sb mt-10" v-if="type=='price'">
				<text class="font-size-12 font-color-minor">{{handleLang('收入账号')}}</text>
				<view class="account">
					<view class="flex-center" v-for="(item,idx) in payTypeList" :key="idx">
						<w-icon :name="item.icon" size="16"></w-icon>
						<text class="font-size-10 ml-4">{{ item.text && handleLang(item.text) }}</text>
					</view>
				</view>
			</view>
			<view class="ipt-pwd">
				<u-code-input v-model="pwd" :focus="true" :dot="true" size="42"
					@finish="$emit('finish',pwd)"></u-code-input>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "password-authentification",
		props: {
			payType: {
				type: Array,
				default: () => {
					return []
				}
			},
			price: {
				type: String | Number,
				default: 0
			},
			show: {
				type: Boolean,
				default: false
			},
			sj: Object,
			type: {
				type: String,
				default: 'price'
			}
		},
		computed: {
			payTypeList() {
				let payType = uni.$u.deepClone(this.payType);

				return payType.map(item => {
					let obj = {};
					switch (item) {
						case 'huifu':
							obj = {
								text: '钱包A',
								icon: 'hf'
							}
							break;
						case 'yibao':
							obj = {
								text: '易宝钱包',
								icon: 'yibao'
							}
							break;
					}
					return obj
				})
			}
		},
		model: {
			prop: 'show',
			event: 'change'
		},
		data() {
			return {
				pwd: ''
			};
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content {
		background: #fff;
	}

	.pwd_pop_con {
		>.title {
			width: 100%;
			text-align: center;
			@extend .font-size-16, .mt-16;
		}

		>.price {
			width: 100%;
			text-align: center;
			@extend .font-size-24, .mt-12, .font-w-500;

			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}

		.set {
			@extend .font-size-12, .mt-16;
		}

		>.line {
			width: 100%;
			height: 4rpx;
			// background-image: url('/static/icon//line2.png');
			background-size: 100% auto;
			margin-top: 48rpx;
		}

		/deep/ .u-code-input__item {
			border: none !important;
			background-color: #f2f2f2;
			border-radius: 16rpx;
		}

		>.ipt-pwd {
			width: 100%;
			height: 200rpx;
			@extend .flex-center;
		}

		.account {
			@extend .flex;

			>view {
				margin-left: 16rpx;
				background: $theme-jb-color;
				border-radius: 8rpx;
				padding: 6rpx 12rpx;

				>text {
					color: #fff;
				}
			}
		}
	}
</style>